<template>
  <div class="albumDetail-con">
    <div class="albumDetail-main">
      <div class="albumDetail-head">
        <div class="albumDetail-img">
          <img src="//y.qq.com/music/photo_new/T002R300x300M0000004IGqu0xFgIG_2.jpg?max_age=2592000" alt="" />
          <i class="albumDetail-img-icon"></i>
        </div>
        <div class="albumDetail-data">
          <h1 class="albumDetail-data-h">满天星辰不及你</h1>
          <div class="albumDetail-icon">
            <span>毒药</span>
          </div>
          <ul class="albumDetail-info">
            <li>流派: POP流行</li>
            <li>流派: POP流行</li>
            <li>流派: POP流行</li>
            <li>流派: POP流行</li>
            <li>流派: POP流行</li>
          </ul>
          <div class="albumDetail-btn">
            <div class="albumDetail-btn-item albumDetail-btn-active">
              <div class="albumDetail-btn-ac">
                <span class="iconfont icon-play1"></span>
                播放全部
              </div>
            </div>
            <div class="albumDetail-btn-item">
              <div class="albumDetail-btn-ac">
                <span class="iconfont icon-plus-square"></span>
                收藏
              </div>
            </div>
            <div class="albumDetail-btn-item">
              <div class="albumDetail-btn-ac">
                <span class="iconfont icon-download"></span>
                评论
              </div>
            </div>
            <div class="albumDetail-btn-item">
              <div class="albumDetail-btn-ac">
                <span class="iconfont icon-download"></span>
                更多
              </div>
            </div>
          </div>
        </div>

      </div>
      <div class="albumDetail-content">
        <div class="albumDetail-layout">
          <div class="albumDetail-mod-hd">
            <div class="albumDetail-mod-item">歌曲</div>
            <div class="albumDetail-mod-con">歌手</div>
            <div class="albumDetail-mod-time">时长</div>
          </div>
          <div class="albumDetail-mod-list" >
            <h1>1</h1>
            <div class="albumDetail-mod-link">
              <div class="mod-link-left">
                <a href="#" class="mod-link-con">满天星辰不及你</a>
                <a href="#" class="albumDetail-link-conto">
                  <span>MV</span>
                </a>
              </div>
              <div class="albumDetail-link-right">
                <a href="#"> <span class="iconfont icon-play1"></span></a>
                <a href="#"><span class="iconfont icon-plus"></span></a>
                <a href="#"><span class="iconfont icon-share"></span></a>
              </div>
              
            </div>
            <span class="albumDetail-text">毒药</span>
            <div class="albumDetail-mod-name">04:51</div>
          </div>
          <div class="albumDetail-mod-list" >
            <h1>1</h1>
            <div class="albumDetail-mod-link">
              <div class="mod-link-left">
                <a href="#" class="mod-link-con">满天星辰不及你</a>
                <a href="#" class="albumDetail-link-conto">
                  <span>MV</span>
                </a>
              </div>
              <div class="albumDetail-link-right">
                <a href="#"> <span class="iconfont icon-play1"></span></a>
                <a href="#"><span class="iconfont icon-plus"></span></a>
                <a href="#"><span class="iconfont icon-share"></span></a>
              </div>
              
            </div>
            <span class="albumDetail-text">毒药</span>
            <div class="albumDetail-mod-name">04:51</div>
          </div>
          <div class="albumDetail-mod-list" >
            <h1>1</h1>
            <div class="albumDetail-mod-link">
              <div class="mod-link-left">
                <a href="#" class="mod-link-con">满天星辰不及你</a>
                <a href="#" class="albumDetail-link-conto">
                  <span>MV</span>
                </a>
              </div>
              <div class="albumDetail-link-right">
                <a href="#"> <span class="iconfont icon-play1"></span></a>
                <a href="#"><span class="iconfont icon-plus"></span></a>
                <a href="#"><span class="iconfont icon-share"></span></a>
              </div>
              
            </div>
            <span class="albumDetail-text">毒药</span>
            <div class="albumDetail-mod-name">04:51</div>
          </div>
          <div class="topList-page">
          <div class="topList-page-text">
            <p>查看更多内容，请下载客户端</p>
            <a href="#" class="topList-page-link">立即下载</a>
          </div>
        </div>
        <div class="topList-mod-comment">
          <div class="topList-mod-comment-text">
            <h1>评论<span>共xxx条评论</span></h1>
          </div>
          <div class="topList-mod-comment-input">
            <textarea name="" id="" cols="30" rows="10" placeholder="说说你的看法"></textarea>
            <div class="topList-mod-comment-btn">发表评论</div>
          </div>
          <div class="topList-mod-comment-md">
            <h1>全部评论</h1>
            <ul class="comment-list">
              <li class="comment-item">
                <div class="comment-wrap">
                  <a href="#">
                    <img src="//thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTII6orxTxOu18A8qTKrjvv2tMyP4EzWBJGMgawnMAM3Qxlj7xJSTo4vepNhAEkRUD7lHUXluScFnA/132">
                  </a>
                 <div class="comment-right">
                  <h4>xxx</h4>
                  <div>xxx</div>
                 </div>
                </div>
              </li>
             
            </ul>
          </div>
        </div>
        </div>
        <div class="albumDetail-text">
          <h1>简介</h1>
          <p>日落跌进星河里 留给山川的着迷 长夜繁星的欢喜 坠歌毒药伴君心 愿君 跨过星河迈过月亮 去迎接 更好的自己</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "AlbumDetail",
}
</script>

<script lang="ts" setup></script>

<style scoped>
  .albumDetail-con{
    width: 100%;
    height: 100%;
    background-color: #f3f3f3;
  }
  

.albumDetail-img-icon{
  width:300px;
  height:266px;
  background:url(https://y.qq.com/ryqq/static/media/album_cover.c202f1da.png?max_age=2592000) 0 0 no-repeat;
  position: absolute;
    left: 0;
    top: 0;
}
.albumDetail-btn-item:hover .albumDetail-btn-ac{
  background-color: rgba(0,0,0,.3);
}
  .albumDetail-content{
    display: flex;
  }
  .albumDetail-main{
    width:1200px;
    margin:0 auto;
  }
  .albumDetail-head{
    width:100%;
    height:250px;
    padding-top:40px;
    display: flex;
  }
  .albumDetail-img{
    width: 250px;
    height: 250px;
    position:relative;
  }
  .albumDetail-img img{
    width: 100%;
    height: 100%;
  }
  .albumDetail-data{
    width: 800px;
    height: 250px;
    margin-left: 80px;
  }
  .albumDetail-data-h{
    font-size: 31px;
    font-weight: 400;
    margin-top: 10px;
    margin:0;
  }
  .albumDetail-icon{
    height: 24px;
    font-size: 16px;
    margin: 5px 0;
  }
  .albumDetail-info{
    width: 520px;
  }
  .albumDetail-info li{
    display: inline-block;
    font-size:14px;
    color:#000;
    height: 27px;
    line-height: 27px;
  }
  .albumDetail-info li:nth-of-type(odd){
    width: 250px;
  }
  .albumDetail-info li:nth-of-type(even){
    width: 166px;
  }
  
  .albumDetail-btn{
    margin-top: 10px;
  }
.albumDetail-btn-item {
  width: 123px;
  height: 38px;
  display: inline-block;
  border: 1px solid #c9c9c9;
  margin-right: 10px;
  text-align: center;
  line-height: 38px;
  font-size: 14px;
  box-sizing: border-box;
  cursor: pointer;
}

.albumDetail-btn-ac{
  width: 100%;
  height: 100%;
  /* background-color: #fff; */
}
.albumDetail-btn-item:hover .topList-btn-ac{
  background-color: rgba(0,0,0,.3);
}
.albumDetail-btn-active {
  background-color: #31c27c;
  color: #fff;
}
.albumDetail-content{
  width: 1200px;
  margin:0 auto;
  margin-top:20px;
}
.albumDetail-mod-hd {
  display: flex;
  width: 850px;
  height: 50px;
  line-height: 50px;
}

.albumDetail-mod-item {
  width: 556px;
  height: 50px;
  margin-left: 80px;
}
.albumDetail-mod-time {
  width: 556px;
  height: 50px;
  padding-left: 80px;
}
.mod-link-con{
  
 font-size: 14px;
}

.albumDetail-mod-con {
  width: 198px;
  height: 50px;
}

.albumDetail-mod-list {
  display: flex;
  width: 100%;
  height: 50px;
}

.albumDetail-mod-list h1 {
  width: 60px;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  margin: 0;
}

.albumDetail-mod-link {
  display: flex;
  height: 50px;
  width: 300px;
  line-height: 50px;
  justify-content: space-between;
}

.albumDetail-link-conto {
  border: 1px solid #31c37c;
  border-radius: 5px;
  text-align: center;
  width: 40px;
  height: 16px;
  margin-left: 5px;
  text-decoration: none;
}
.albumDetail-link-right{
  display: none;
}
.albumDetail-mod-list:hover .albumDetail-link-right{
  display: block;
}
.albumDetail-link-right a {
  width: 36px;
  height: 36px;
  border: 1px solid #999;
  margin: 0 auto;
  line-height: 36px;
  border-radius: 50%;
  text-align: center;
  display: inline-block;
  margin-left: 10px;
}
.albumDetail-link-right a:hover {
  border: 1px solid #31c27c;
  color: #31c27c;
}
.albumDetail-text{
  width: 180px !important;
  line-height: 50px;
  text-align: left;
  padding-left:15px;
  font-size:14px;
}
.albumDetail-mod-name{
  width: 50px;
  height: 50px;
  line-height: 50px;
  color: #999;
}
.albumDetail-text{
  width: 290px;
}
.topList-page{
  width: 100%;
  height: 80px;
  margin: 60px 0 20px;
}
.topList-page-text{
  width: 100%;
  height: 100%;
  text-align: center;
}
.topList-page-text p{
  font-size: 18px;
  color: #000;
}
.topList-page-text a{
  display: block;
  width: 175px;
  height: 41px;
  background-color: #31c27c;
  margin: 0 auto;
  color: #fff;
  font-size: 16px;
  line-height: 41px;
  border-radius: 41px;
  margin-top: 20px;
  text-align: center;
}
.topList-mod-comment{
  width: 990px;
}
.topList-mod-comment-text{
  width: 100%;
  height: 60px;

}
.topList-mod-comment-text h1{
  font-size: 24px;
  font-weight: 400;
  color: #000;
}
.topList-mod-comment-text h1 span{
  font-size: 14px;
  padding-left: 10px;
  color: #999;
}
.topList-mod-comment-input textarea{
  border: none;
  background-color: #f5f5f5;
  width: 970px;
  height: 100px;
  padding-top: 20px;
  padding-left: 20px;
}
.topList-mod-comment-btn{
  color: #fff;
  text-align: center;
  line-height: 27px;
  margin-top: 10px;
  width: 80px;
  height: 27px;
  background-color: #31c27c;
  margin-left:910px
}
.topList-mod-comment-md{
  height: 100%;
}
.topList-mod-comment-md h1{
  width: 100%;
  height: 45px;
  border-bottom: 1px solid #c9c9c9;
}
.comment-list{
  width: 100%;
}
.comment-item{
  width: 100%;
  height: 140px;

  /* background-color: red; */

}
.comment-item .comment-wrap{
  width: 914px;
  height: 113px;
  display: flex;
  padding-top: 20px;
}
.comment-item .comment-wrap a{
  display: block;
  width: 38px;
  height: 38px;
}
.comment-item .comment-wrap a img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.comment-item .comment-right{
  margin-left: 10px;
}
.comment-item .comment-right h4{
  height: 26px;
  color: #999;
}
.comment-item .comment-right p{
  color: #999;
  margin-bottom: 10px;
}
.albumDetail-text p{
  margin:0;
  padding:0;
  line-height: normal;
  font-size:16px
}
</style>
